<template>
    <div class="container-item" @dragover.stop="handlerDragover" @mouseup.stop="handlerMouseUp"
        @dragend.stop="handlerDragend" @click.stop="handleClick" draggable :class="dynamic" :id="layout.id"
        :style="operateStyle" :data-layout="layout.type">
        <!-- 操作遮罩层 -->
        <template v-if="operate !== ''">
            <component :is="operate" @submit="handleSubmit" :layout-msg="layout.operate" :flex-type="flexType"
                :name.sync="operate" @change="handleChange" data-fill="fill"> </component>
        </template>
        <!-- 布局递归层 -->
        <template v-if="layout.children">
            <Layout v-for="(item, index) in layout.children" :flex-type="layout.type" :key="index" :layout="item" />
        </template>
        <!-- 动态组件层 -->
        <template v-if="layout.slot">
            <component :is="layout.slot" :layout.sync="layout" data-fill="fill"> </component>
        </template>
        <!-- 空状态层 -->
        <template v-else-if="!layout.children || layout.children.length == 0">
            <el-empty @click.stop="handleClick"></el-empty>
        </template>
    </div>
</template>
<script>
import template from "@/utils/template"

let time;
let draw;
export default {
    props: {
        // 结构循环信息
        layout: {
            type: Object,
            default: () => ({})
        },
        // 布局类型
        flexType: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            operate: '',
            dynamic: [],
            operateStyle: {}
        }
    },
    mounted() {
        this.dynamic = this.layout.class ? [...this.layout.class] : []
        // this.canvas()
    },
    methods: {
        // 属性设置同步调整
        handleChange([operateStyle, layout]) {
            this.operateStyle = operateStyle
            this.layout.type = layout
        },
        // 表单确定调整后重新渲染模块内容
        handleSubmit() {
            let slot = this.layout.slot
            this.layout.slot = ""
            this.operate = ""
            if (draw) {
                clearTimeout(draw)
            }
            draw = setTimeout(() => {
                this.layout.slot = slot
            }, 300)
        },
        // 拖拽信息与赋值
        handlerDragover() {
            if (time) {
                clearTimeout(time)
            }
            time = setTimeout(() => {
                let operate = template.getOperate()
                if (operate.type === "container") {
                    this.layout.children.push({
                        slot: "",
                        type: "row",
                        class: [],
                        children: [],
                        operate
                    })
                } else {
                    this.layout.slot = operate.slot
                }
            }, 300)
        },
        // 操作遮罩层展示
        handleClick() {
            this.dynamic.push("layout-action")
            this.operate = 'Operate'
        },
        // 鼠标按键弹起事件
        handlerMouseUp(event) {
            console.log(event)
        },
        // 拖拽结束事件
        handlerDragend() {
            console.log(this.layout)
        }
    }
}
</script>
  
<style lang="scss" scoped>
.container-item {
    position: relative;
    width: 100%;
    height: 100%;
}

.layout-action {
    border: 1px dashed #409EFF;
}

.el-empty {
    width: 100%;
    height: 100%;
}
</style>
  